import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker, Image, Input } from '@tarojs/components'
import './chatdetail.css'
import { AtDivider, AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid } from "taro-ui"
import app from '../../../../main.js';
import reactMixin from 'react-mixin';
import myJs from './chatdetailJs.js'
import luyin from '../../../../img/yuyinB.png'
import keyboard from '../../../../img/jianpangB.png'
import plus from '../../../../img/plus.png'
import icon_link from '../../../../img/icon_link.png'
import item_image from '../../../../img/item_image.png'

export default class ChatDetail extends Component {

    config = {
        navigationBarTitleText: '咨询记录'
    }
    constructor() {
        super(...arguments);
        this.state = this.getData();
    }

    init() {
        this.setState({
            is_show_luyin: true,
            is_open_grid: false,
            current_index: 0,
            wenzen_order: {}
        })
        this.getMessages();
        this.setNavigationTitle();
        this.getOrder();
    }

    getOrder() {
        var me = this;
        if (me.state.type == '问诊订单') {
            app.get('web/wenzen_order/order', { id: me.state.relate_id }, function (res) {
                me.setState({
                    wenzen_order: res.data.result
                })
            })
        }
    }

    setNavigationTitle() {
        var me = this;
        app.get('web/patient/get', { id: this.state.receiver_id }, function (res) {
            Taro.setNavigationBarTitle({ title: res.data.result.name + '的咨询记录' });
        })
    }

    offset = 0;
    length = 10;
    total = 0;

    // 初始化参数
    initData() {
        this.setState({
            mySelfId: 'd-' + this.state.sender_id,
            otherId: 'p-' + this.state.receiver_id
        }, () => {
        })
    }

    openGrid() {
        this.setState({
            is_open_grid: !this.state.is_open_grid
        })
    }

    changeGrid(item, index) {
        if (index == 0) {
            this.uploadImage();
        } else if (index == 1) {
            this.uploadVideo();
        } else if (index == 2) {
            app.ct_articles = [];
            app.navigateTo('../aiyanPolular/aiyanPolular');
        } else if (index == 3) {
            app.ct_flow = {};
            app.navigateTo('../../flow/pages/suifangjihua/suifangjihua?patient_id=' + this.state.receiver_id);
        }
    }

    // 查看图片大图
    showImage(image) {
        console.log(image);
        app.prviewImage(image, [image]);
    }

    // 下拉刷新
    onPullDownRefresh() {
        if (this.offset < this.total) {
            this.offset += this.length;
            this.getMessages();
        } else {
            Taro.stopPullDownRefresh();
            app.toastMessage('没有消息了');
        }
    }

    // 结束会话
    endSession() {
        var me = this;
        app.isConfirm('是否结束会话', function (res) {
            app.post('web/wenzen_order/close_zixun', { id: me.state.relate_id }, function (res) {
                if (res.data.status == 200) {
                    var data = {
                        title: '咨询已结算，感谢您耐心的专业解答',
                        time: app.dateFormate(new Date(), "yyyy-MM-dd hh:mm:ss")
                    }
                    me.setState({
                        data: JSON.stringify(data)
                    }, () => {
                        me.send('flag');
                    })
                } else {
                    app.toastMessage('结束会话失败');
                }
            })
        })
    }

    // 确认接单
    acceptOrder() {
        var me = this;
        app.post('web/wenzen_order/acceptOrder', { id: me.state.relate_id }, function (res) {
            app.redirectTo('../Chat/Chat?type=问诊订单&relate_id=' + me.state.relate_id + '&receiver_id=' + me.state.receiver_id);
        });
    }

    // 拒接接单
    refuseOrder() {
        var me = this;
        app.isConfirm('是否拒绝接单', function (res) {
            app.post('web/wenzen_order/refuseOrder', { id: me.state.relate_id }, function (res) {
                if (res.data.result.is_success) {
                    app.toastMessage('操作成功', function () {
                        setTimeout(() => {
                            Taro.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    });
                } else {
                    app.toastMessage('操作失败');
                }
            });
        });

    }

    componentDidShow() {
    }

    render() {
        return (
            <View id='page_v'>
                {/* <View className='time'>2019-06-01 12:12:00</View> */}
                {
                    this.state.messages.map((item, index) => {
                        if (item.type == 'text' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <View className='content_txt'>{item.data}</View>
                                </View>
                            )
                        } else if (item.type == 'text' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <View className='content_txt'>{item.data}</View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'image' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <Image className='content_image' mode='widthFix' src={app.getPath(item.data)} onClick={this.showImage.bind(this, item.data)}></Image>
                                </View>
                            )
                        } else if (item.type == 'image' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <Image className='content_image' mode='widthFix' src={app.getPath(item.data)} onClick={this.showImage.bind(this, item.data)}></Image>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'video' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <Video
                                        src={app.getPath(item.data)}
                                        controls={true}
                                        autoplay={false}
                                        initialTime='0'
                                        id='video'
                                        loop={false}
                                        muted={false}
                                        className='content_video'
                                    />
                                </View>
                            )
                        } else if (item.type == 'video' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <Video
                                        src={app.getPath(item.data)}
                                        controls={true}
                                        autoplay={false}
                                        initialTime='0'
                                        id='video'
                                        loop={false}
                                        muted={false}
                                        className='content_video'
                                    />
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'audio' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <View className='audio_box'>
                                        <Image className='audio_image' src={app.getPath('img/play_left.png')}></Image>
                                        <View className='audio_txt'>{item.data.time}''</View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'audio' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <View className='audio_box' onClick={this.clickAudio.bind(this, item.data.url, index)}>
                                        <View className='audio_txt'>{item.data.time}''</View>
                                        <Image className='audio_image' src={item.is_play ? app.getPath('img/play_right.gif') : app.getPath('img/play_right.png')}></Image>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'article' && !item.isMyself) {
                            return (
                                <View className='chat_item'>
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <View className='article'>
                                        <Image className='icon_link' src={icon_link}>/</Image>
                                        <View className='article_txt'>{item.data.title}</View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'article' && item.isMyself) {
                            return (
                                <View className='chat_item right'>
                                    <View className='article'>
                                        <Image className='icon_link' src={icon_link}>/</Image>
                                        <View className='article_txt'>{item.data.title}</View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'flow' && !item.isMyself) {
                            return (
                                <View className="chat_item">
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <View className='flow' onClick={this.navigateTo.bind(this, '../../../flow/pages/suifangjihuaxiangqing/suifangjihuaxiangqing?id=' + item.data.id)}>
                                        <View className='flw_top'>{item.data.title}</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={app.getPath('img/item_image.png')}></Image>
                                            <View className='flw_txt'>我给您定制了一个随访计划，请遵照计划中提醒的内容来执行。</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'flow' && item.isMyself) {
                            return (
                                <View className="chat_item right">
                                    <View className='flow' onClick={this.navigateTo.bind(this, '../../../flow/pages/suifangjihuaxiangqing/suifangjihuaxiangqing?id=' + item.data.id)}>
                                        <View className='flw_top'>{item.data.title}</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={app.getPath('img/item_image.png')}></Image>
                                            <View className='flw_txt'>我给您定制了一个随访计划，请遵照计划中提醒的内容来执行。</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        } else if (item.type == 'flag') {
                            return (
                                <View className='flag'>
                                    {
                                        !app.isEmpty(item.data.title) &&
                                        <View className='flag_top'>
                                            <View className='dot'>
                                                <View className='fl_dot dot_width'></View>
                                            </View>
                                            <View className='fl_txt'>{item.data.title}</View>
                                            <View className='dot'>
                                                <View className='fr_dot dot_width'></View>
                                            </View>
                                        </View>
                                    }
                                    <View className='f_time'>{item.data.time}</View>
                                </View>
                            )
                        } else if (item.type == 'wz_illness_form' && !item.isMyself) {
                            return (
                                <View className="chat_item">
                                    <Image className='head_image' src={app.getPath(item.receiver_head_image)} onClick={this.navigateTo.bind(this, '../../../flow/pages/patientdetails/patientdetails?id=' + this.state.receiver_id)}></Image>
                                    <View className='flow' onClick={this.navigateTo.bind(this, '../../../doctorpages/Illness/Illness?id=' + item.data.id)}>
                                        <View className='flw_top'>病情表单</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={item_image}></Image>
                                            <View className='flw_txt'>{item.data.title}</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                </View>
                            )
                        } else if (item.type == 'wz_illness_form' && item.isMyself) {
                            return (
                                <View className="chat_item right">
                                    <View className='flow' onClick={this.navigateTo.bind(this, '../../../doctorpages/Illness/Illness?id=' + item.data.id)}>
                                        <View className='flw_top'>病情表单</View>
                                        <View className='flw_center'>
                                            <Image className='flw_image' src={item_image}></Image>
                                            <View className='flw_txt'>{item.data.title}</View>
                                        </View>
                                        <View className='flw_desc'>查看详情></View>
                                    </View>
                                    <Image className='head_image' src={app.getPath(item.sender_head_image)}></Image>
                                </View>
                            )
                        }
                    })
                }

                <View style='width:750rpx;height:200rpx;'></View>

                {
                    (this.state.wenzen_order && this.state.wenzen_order.status == '待接单')
                    &&
                    <View className='bottom'>
                        <View className='btn_box'>
                            <View className='refuse' onClick={this.refuseOrder.bind(this)}>拒绝接单</View>
                            <View className='accept' onClick={this.acceptOrder.bind(this)}>确认接单</View>
                        </View>
                    </View>
                }
            </View>
        )
    }
}
reactMixin.onClass(ChatDetail, myJs);
